import React from 'react';
import { Card, Divider } from 'antd';
import { withRouter } from 'umi';
import { Descriptions } from '@/molecules';

const defaultStr = '--';
function PostDetail({ data = {}, loading }) {
    const {
        companyCurrencyCode,
        recruitNums = '0',
        workNatureName = defaultStr,
        dutyName = defaultStr,
        workCity = defaultStr,
        jobRequirement = defaultStr,
        minSalary,
        maxSalary,
        salaryNum,
        positionDuty = defaultStr,
        recruitSexName = defaultStr,
        recruitDegreeName,
        workYearsName,
        positionName = defaultStr,
        rankValue = defaultStr
    } = data;
    const renderExp = () => [workYearsName, recruitDegreeName].filter(_ => _).join('/') || defaultStr;
    const renderSalary = () => {
        const prefix = [minSalary, maxSalary]
            .filter(_ => _)
            .map(item => `${item}k`)
            .join('-');
        const subfix = salaryNum && `*${salaryNum} ${companyCurrencyCode || '薪'}`;
        return [prefix, subfix].filter(_ => _).join(' ') || defaultStr;
    };

    const renderPosition = () => `${positionName}/${rankValue}`;
    const descriptions1 = [
        { label: '岗位名称', value: dutyName, require: true },
        { label: '需求人数', value: recruitNums, require: true },
        { label: '工作城市', value: workCity, require: true },
        { label: '工作性质', value: workNatureName }
    ];

    const descriptions2 = [
        { label: '经验和学历', value: renderExp(), require: true },
        { label: '性别', value: recruitSexName, require: false },
        { label: '薪资范围', value: renderSalary(), require: false },
        { label: '匹配职位', value: renderPosition(), require: false },
        {
            label: '职位要求',
            value: positionDuty,
            require: true
        },
        {
            label: '岗位职责',
            value: jobRequirement,
            require: true
        }
    ];

    return (
        <Card title={<div style={{ margin: '10px 0' }}>岗位对外信息</div>} bordered={false} loading={loading}>
            <Descriptions title="基本信息" descriptions={descriptions1} />
            <Divider />
            <Descriptions title="岗位要求" descriptions={descriptions2} />
        </Card>
    );
}

export default withRouter(PostDetail);
